<template>
    <div @click="onToggle">
        <el-icon :size="28" color="#fff" v-if="!isFullscreen">
            <FullScreen />
        </el-icon>
        <el-icon :size="28" color="#fff" v-else>
            <Aim />
        </el-icon>
    </div>
</template>
<script setup lang="ts" name="fullsreenIcon">
import screenfull from 'screenfull';
import { ref, onMounted, onUnmounted } from 'vue';

// ref 对象，用于存储当前是否为全屏状态，初始值为 false。
const isFullscreen = ref(false)

// 监听screenfull的变化
const change = () => {
    isFullscreen.value = screenfull.isFullscreen
}

// 切换事件
const onToggle = () => {
    // 切换全屏模式
    screenfull.toggle()
}

// 设置侦听器
onMounted(() => {
    // on：绑定监听
    screenfull.on('change', change)
})

// 删除侦听器
onUnmounted(() => {
    // off：取消监听
    screenfull.off('change', change)
})

</script>
<style lang='less' scoped></style>